<script setup lang="ts">
import { h, reactive, ref } from 'vue';
import { NButton } from 'naive-ui';
import { useAppStore } from '@/store/modules/app';
import { REQUEST } from '@/api/request';
import Modalchuku from './modalchuku.vue';
const appStore = useAppStore();
const showModal: any = ref(false);
const emit = defineEmits(['ok']);
const title: any = ref('');
const open = (data: any) => {
  title.value = '查看订单';
  showModal.value = true;
  // eslint-disable-next-line @typescript-eslint/no-use-before-define
  getData(data.id);
};
const actionsArr: any = [
  {
    title: '出库',
    key: 'edit'
  }
];
const loading = ref(false);
const handleCancel = () => {
  showModal.value = false;
};
const columns: any[] = reactive([
  {
    title: '姓名',
    key: 'userName'
  },
  {
    title: '购买数量',
    key: 'orderNumber'
  },
  {
    title: '出库数量',
    key: 'outbound'
  },
  {
    title: '未出库数量',
    key: 'undelivered'
  },
  {
    title: '操作',
    key: 'actions',
    align: 'center',
    minWidth: 150,
    render(row: any) {
      const buttonGroup = actionsArr.map((item: any) => {
        return h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            disabled: row.orderNumber === row.outbound,
            style: {},
            onClick: () => {
              if (item.key === 'edit') {
                // eslint-disable-next-line @typescript-eslint/no-use-before-define
                edit(row);
              }
            }
          },
          {
            default: () => '出库'
          }
        );
      });

      return buttonGroup;
    }
  }
]);
const chukuVue: any = ref(null);
const edit = (row: any) => {
  chukuVue.value.open(row);
};
const tableData: any = ref([]);
const getData = (ids: any) => {
  loading.value = true;
  REQUEST.POST('ORDERSHOPPINGLIST', {
    productId: ids
  }).then((res: any) => {
    loading.value = false;

    tableData.value = res.data;
    // eslint-disable-next-line array-callback-return
    tableData.value.map((item: any) => {
      item.outbound = item.orderNumber - item.undelivered;
    });
  });
};
const ok = () => {
  showModal.value = false;
  emit('ok');
};
defineExpose({ open });
</script>

<template>
  <NModal
    v-model:show="showModal"
    :style="{ width: !appStore.isMobile ? '700px' : '100%' }"
    class="custom-card"
    preset="card"
    :title="title"
  >
    <NCard :bordered="false" size="huge" role="dialog" aria-modal="true">
      <template #header-extra>x</template>
      <NDataTable :loading="loading" :columns="columns" :data="tableData" :bordered="false"></NDataTable>
      <template #footer>
        <NFlex justify="end">
          <NButton @click="handleCancel">关闭</NButton>
        </NFlex>
      </template>
    </NCard>
    <Modalchuku ref="chukuVue" @ok="ok"></Modalchuku>
  </NModal>
</template>
